<template>
    <div>
        <template>
            <el-form ref="form" :model="searcMap" label-width="80px">
                <el-form-item label="贷款名称">
                    <el-input v-model="searcMap.keyword"></el-input>
                </el-form-item>
                 <el-form-item label="最小金额">
                    <el-input v-model="searcMap.min"></el-input>
                </el-form-item>
                 <el-form-item label="最大金额">
                    <el-input v-model="searcMap.max"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searcMap.status" placeholder="请选择">
                        <el-option label="草稿" value="0"></el-option>
                        <el-option label="提交cfo" value="2"></el-option>
                        <el-option label="cfo审核成功" value="3"></el-option>
                        <el-option label="cfo审核失败" value="4"></el-option>
                        <el-option label="ceo审核成功" value="5"></el-option>
                        <el-option label="ceo审核失败" value="6"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>


            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                 <el-table-column
                        prop="name"
                        label="xx贷款"
                        width="180">
                     <template slot-scope="scope">
                         <div v-html="scope.row.name">

                         </div>
                     </template>
                </el-table-column>
                <el-table-column
                        prop="period"
                        label="期数"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="rate"
                        label="利率">
                </el-table-column>
                 <el-table-column
                        prop="rateUnit"
                        label="利率单位">
                </el-table-column>
                 <el-table-column
                        prop="productType"
                        label="产品类型">
                </el-table-column>
                 <el-table-column
                        prop="repaymentWay"
                        label="还款方式">
                </el-table-column>
                 <el-table-column
                        prop="minMoney"
                        label="最小金额">
                </el-table-column>
                <el-table-column
                        prop="maxMoney"
                        label="最大金额">
                </el-table-column>
            </el-table>

            <div class="block">

                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageNo"
                        :page-sizes="[3, 5, 10]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </template>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tableData: [],
                pageNo:1,
                pageSize:5,
                total:0,
                searcMap:{
                },
                mapSearchItem:{}


            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                this.findSearch();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.findSearch();
            },
            findSearch(){
                axios.post("http://localhost:8086/api/search/findSearch/"+this.pageNo+"/"+this.pageSize,this.searcMap).then(res =>{
                    if (res.data){
                      this.tableData=res.data.searchItemList
                        this.total=res.data.total
                        this.mapSearchItem=res.data.mapSearchItem
                    }
                })
            },
            getProductType(){
                axios.get("http://localhost:8086/api/product/productTypeList").then(res =>{

                    if (res.data){
                        this.productTypeList=res.data
                    }
                })
            },
            onSubmit(){
                this.findSearch();
            }
        },
        created() {
            this.findSearch();
        }
    }
</script>

<style>

</style>